<template>
  <div>
    <!-- 仓库管理 -->
    <div v-if="$store.state.user.myText === '仓库管理'">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-card class="box-card">
          <el-row>
            <el-col :span="8">
              <el-form-item prop="id" label="仓库编码">
                <el-input v-model="ruleForm.id" disabled style="background-color: #f2ebeb;" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="仓库名称">
                <el-input v-model="ruleForm.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="type" label="仓库类型">
                <el-select v-model="ruleForm.type" placeholder="请选择" style="width: 95%;">
                  <el-option
                    v-for="item in warehouseType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item prop="region" label="省/市/区">
                <el-cascader
                  ref="addListRef"
                  v-model="ruleForm.region"
                  style="width: 97.5%; margin-bottom: 20px;"
                  :options="options"
                  :props="{ expandTrigger: 'click',value: 'value',label: 'label' }"
                  @change="handleChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item prop="detailedType" label="详细地址">
                <el-input v-model="ruleForm.detailedType" style="width: 97.5%;" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-top: 37px;">
              <el-form-item prop="myState" label="仓库状态">
                <el-radio-group v-model="ruleForm.myState">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item prop="detailedType" label="仓库面积" style="width: 95%; ">
                <el-input v-model="ruleForm.area" style="width: 90%; " placeholder="请输入" />
                <span class="m2">m³</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="head" label="负责人">
                <el-input v-model="ruleForm.head" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="phone" label="联系电话">
                <el-input v-model="ruleForm.phone" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="display: flex; justify-content: center; align-items: center;">
            <el-col :span="6">
              <el-button round class="returnBtn" @click="returnBtn">返回</el-button>
              <el-button type="primary" round class="submitBtn" @click="submitAdd">提交</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </div>
    <!-- 库区管理 -->
    <div v-if="$store.state.user.myText ==='库区管理'">
      <el-form :model="reservoirAreaForm" :rules="reservoirAreaFormRules">
        <el-card class="box-card">
          <el-row>
            <el-col :span="6">
              <el-form-item label="库区编号" prop="id">
                <el-input v-model="reservoirAreaForm.code" disabled style="background-color: #f2ebeb;" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属仓库" prop="belong">
                <el-select v-model="reservoirAreaForm.warehouseId" placeholder="请选择" style="width: 95%;">
                  <el-option
                    v-for="item in AllWarehouseInfo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="库区名称" prop="name">
                <el-input v-model="reservoirAreaForm.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="温度类型" prop="temperature">
                <el-select v-model="reservoirAreaForm.temperatureType" placeholder="请选择" style="width: 95%;">
                  <el-option
                    v-for="item in temperature"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="承重类型" prop="bearing">
                <el-select v-model="reservoirAreaForm.bearingType" placeholder="请选择" style="width: 95%;">
                  <el-option
                    v-for="item in bearing"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用途属性" prop="use">
                <el-select v-model="reservoirAreaForm.useType" placeholder="请选择" style="width: 95%;">
                  <el-option
                    v-for="item in use"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人" prop="head">
                <el-input v-model="reservoirAreaForm.personName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="reservoirAreaForm.phone" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <el-form-item label="库区状态" prop="state">
                <el-radio-group v-model="reservoirAreaForm.status" placeholder="请选择">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="0">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="display: flex; justify-content: center; align-items: center;">
            <el-col :span="6">
              <el-button round class="returnBtn" @click="returnBtn">返回</el-button>
              <el-button type="primary" round class="submitBtn" @click="submitAdd">提交</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// 获取新建信息编号id 新建信息 编辑信息 修改信息 获取新增库区id 获取所有仓库 获取修改库区的信息 修改库区信息
import { addInfo, addWarehouseInfo, editWarehouseInfo, putWarehouseInfo, getAddWarehouseId, getWarehouseInfo, addReservoirAreaInfo, inquireReservoirAreaInfo, putReservoirAreaInfo } from '@/api'
import { regionData } from 'element-china-area-data'
export default {
  data() {
    return {
      // 用途类型
      use: [
        { value: 'RKHCQ', label: '入库缓存区' },
        { value: 'CKHCQ', label: '出库缓存区' },
        { value: 'CCQ', label: '存储区' },
        { value: 'FJQ', label: '分拣区' },
        { value: 'ZJQ', label: '质检区' }
      ],
      // 承重类型
      bearing: [
        { value: 'ZX', label: '重型' },
        { value: 'BX', label: '中型' },
        { value: 'QX', label: '轻型' }
      ],
      // 温度类型
      temperature: [
        { value: 'CW', label: '常温' },
        { value: 'LC', label: '冷藏' },
        { value: 'HW', label: '恒温' }
      ],
      AllWarehouseInfo: [],
      // 库区新建表单
      reservoirAreaForm: {
        bearingType: '', // 承重类型
        code: '', // 库区编号
        name: '', // 库区名称
        personName: '', // 负责人
        phone: '', // 联系电话
        status: '', // 库区状态
        temperatureType: '', // 温度类型
        useType: '', // 用途属性
        warehouseId: '' // 所属仓库
      },
      // 库区信息校验
      reservoirAreaFormRules: {
        code: [{ required: true, message: '请输入库区编号', trigger: 'blur' }],
        warehouseId: [{ required: true, message: '请输入所属仓库', trigger: 'blur' }],
        name: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
        temperatureType: [{ required: true, message: '请输入温度类型', trigger: 'blur' }],
        bearingType: [{ required: true, message: '请输入承重类型', trigger: 'blur' }],
        useType: [{ required: true, message: '请输入用途属性', trigger: 'blur' }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        status: [{ required: true, message: '请输入库区状态', trigger: 'blur' }]
      },

      // 保存回显数据
      edit: {},
      // 保存编辑当页面的id
      myId: '',
      // 拼接好的数据
      address: '',
      // 保存获取到的新增信息
      addWarehouseInfo: {},
      // 给级联选择器赋值城市信息
      options: regionData,
      //  仓库类型
      warehouseType: [
        { value: 'ZZ', label: '中转仓' },
        { value: 'JG', label: '加工仓' },
        { value: 'CB', label: '储备仓' },
        { value: 'LC', label: '冷藏仓' }
      ],
      ruleForm: {
        id: '', // 仓库编码
        name: '', // 仓库名称
        type: '', // 仓库类型
        region: [], // 仓库地址
        detailedType: '', // 详细地址
        myState: '', // 仓库状态
        area: '', // 面积
        head: '', // 负责人
        phone: ''// 联系电话
      },
      rules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        head: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        region: [{ required: true, message: '请输入仓库地址', trigger: 'blur' }],
        type: [{ required: true, message: '请输入仓库类型', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.myId = this.$router.history.current.params.id
    // 获取页面基础信息
    if (this.myId === 'null') {
      this.getAddInfo()
    } else {
      this.editInfo(this.myId)
    }
    this.getAllWarehouseInfo()
  },
  methods: {
    // 获取所有仓库
    async getAllWarehouseInfo() {
      const res = await getWarehouseInfo({ status: 1 })
      this.AllWarehouseInfo = res.data
    },
    // 点击返回
    returnBtn() {
      this.$router.go(-1)
    },
    // 编辑回显数据
    async editInfo(id) {
      if (this.$store.state.user.myText === '仓库管理') {
        const res = await editWarehouseInfo(id)
        this.edit = res.data
        if (res.isSuccess) {
          this.ruleForm.id = res.data.code // 仓库编码
          this.ruleForm.name = res.data.name // 仓库名称
          this.ruleForm.type = res.data.type// 仓库类型
          this.ruleForm.region = [res.data.province, res.data.city, res.data.area] // 仓库地址
          this.ruleForm.detailedType = res.data.personName // 详细地址
          this.ruleForm.myState = res.data.status === 1 ? '1' : '0' // 仓库状态
          this.ruleForm.area = res.data.surface// 面积
          this.ruleForm.head = res.data.personName // 负责人
          this.ruleForm.phone = res.data.phone// 联系电话
          this.$message.success(res.msg)
        }
      } else if (this.$store.state.user.myText === '库区管理') {
        const res = await inquireReservoirAreaInfo(this.myId)
        this.reservoirAreaForm = res.data
        this.reservoirAreaForm.status = this.reservoirAreaForm.status + ''
      }
    },
    // 新增信息
    async submitAdd() {
      if (this.$store.state.user.myText === '仓库管理') {
        if (this.myId === 'null') {
          await addWarehouseInfo({
            address: this.ruleForm.detailedType, // 详细地址
            area: this.ruleForm.region[2], // 最后一级地址
            city: this.ruleForm.region[1], // 第二级地址
            code: this.ruleForm.id, // 仓库编码
            location: this.address, // 拼接后的地址
            name: this.ruleForm.name, // 仓库名称
            personName: this.ruleForm.head, // 负责人
            phone: this.ruleForm.phone, // 手机号
            province: this.ruleForm.region[0], // 第一级地址
            status: this.ruleForm.myState === 1 ? '1' : '0', // 是否启用
            surface: this.ruleForm.area, // 面积
            type: this.ruleForm.type// 仓库类型
          })
        } else {
          const date = dayjs().format('YYYY-MM-DD HH:mm:ss')
          await putWarehouseInfo({
            address: this.ruleForm.detailedType, // 详细地址
            area: this.ruleForm.region[2], // 最后一级地址
            city: this.ruleForm.region[1], // 第二级地址
            code: this.ruleForm.id, // 仓库编码
            createName: this.edit.createName, // 创建人名称
            createTime: this.edit.createTime, // 创建时间
            createUser: '0', // 创建人id
            id: this.myId, // 数据id
            includedNum: +this.edit.includedNum, // 区库数量
            location: this.edit.location || this.address, // 拼接后的地址
            logicDel: 1, // 是否删除 0 删除 1不删除
            name: this.ruleForm.name, // 仓库名称
            personId: null, // 负责人id
            personName: this.ruleForm.head, // 负责人名称
            phone: this.ruleForm.phone, // 手机号
            province: this.ruleForm.region[0], // 第一级地址
            remark: '', // 备注
            status: this.ruleForm.myState === 1 ? '1' : '0', // 是否启用
            surface: this.ruleForm.area, // 面积
            type: this.ruleForm.type, // 仓库类型
            updateName: this.edit.createName, // 更新人名称
            updateTime: date, // 最后修改时间
            updateUser: '0'// 最后修改人id
          })
        }
      } else if (this.$store.state.user.myText === '库区管理') {
        this.reservoirAreaForm.status = Number(this.reservoirAreaForm.status)
        await putReservoirAreaInfo(this.reservoirAreaForm)
      }
      this.myId ? this.$message.success('修改成功') : this.$message.success('添加成功')
      this.$router.go(-1)
    },
    // 获取新增页面编号
    async getAddInfo() {
      if (this.$store.state.user.myText === '仓库管理') {
        const res = await addInfo()
        this.addWarehouseInfo = res
      } else if (this.$store.state.user.myText === '库区管理') {
        const res = await getAddWarehouseId()
        this.addWarehouseInfo = res
        this.reservoirAreaForm.code = res.data
      }
      this.ruleForm.id = this.addWarehouseInfo.data
    },
    // 级联选择器发生改变触发
    handleChange(val) {
      this.ruleForm.region = val
      const data = this.$refs.addListRef.getCheckedNodes()[0].pathLabels
      this.address = data.reduce((prve, item) => {
        return (prve += (item + '/'))
      }, '')
      const num = this.address.length - 1
      this.address = this.address.slice(0, num)
    }
  }
}
</script>

<style scoped lang="scss">
  .box-card{
    margin: 20px 30px;
    padding-left: 20px;
    padding-top:20px ;
    border-radius: 15px;
  }
 .el-input {
    width: 95%;
    background-color: #f7f5f5;
    border-radius: 8px;
  }
 ::v-deep .el-form-item__label{
    font-size: 12px;
    color:#867e7e;
    font-weight: 500;
  }
  .el-button {
    width: 150px;
  }
  .m2{
    width: 10%;
    text-align: center;
    background-color: #e6dfdf;
    display: inline-block;
    border-radius: 0 5px 5px 0;
  }
  ::v-deep .el-input__inner{
    background-color: #f7f5f5;
    border: 1px solid #f7f5f5;
  }
  .returnBtn{
    border: 1px solid #fff;
    background-color: #f7f5f5;
    color: #000;
      &:hover{
      background-color: #f4b53f;
      }
  }
  .submitBtn{
    border: 1px solid #f4b53f;
    background-color: #f4b53f;
    color: #000;
      &:hover{
      background-color: #f09436;
      }
  }
  ::v-deep .el-input.is-disabled .el-input__inner{
    background-color: #f2ebeb;
    border: 1px solid #f2ebeb;
  }
</style>
